<template>
	<view style="width: 100%;height: 100%;overflow: hidden;"> 
		<view class="backcoloe">
			<view class="topback">
				<view class="toptitle">
					<view @click="goback">
						<image src="/static/goback.png" mode="widthFix" style="width: 25px;height: 25px;"></image>
					</view>
					<view style="font-size: 16px;color: #FFFFFF;width: 83%;">
						我的收益
					</view>
					<view style="font-size: 16px;color: #FFFFFF;" >
						
					</view>
				</view>
				<view class="shouyimoney" style="margin-top: 70px;">

					<text style="color: rgba(255, 255, 255, 1);font-size: 30px;text-align: left;font-family: PingFangSC-regular;">{{list.jin}}</text>
					<text style="color: rgba(255, 255, 255, 1);font-size: 15px;text-align: left;font-family: PingFangSC-regular">今日收益</text>
				</view>
				<view class="twowendang">
					<view class="twoone">
						<text style="color: rgba(255, 255, 255, 1);font-size: 22px;text-align: left;font-family: PingFangSC-regular;margin-bottom: 5px;">{{list.shou}}</text>
						<text style="color: rgba(255, 255, 255, 1);font-size: 15px;text-align: left;font-family: PingFangSC-regular;">累计收益</text>
					</view>
					<view class="twoone">
						<text style="color: rgba(255, 255, 255, 1);font-size: 22px;text-align: left;font-family: PingFangSC-regular;margin-bottom: 5px;">{{list.ti}}</text>
						<text style="color: rgba(255, 255, 255, 1);font-size: 15px;text-align: left;font-family: PingFangSC-regular;">提现累计</text>
					</view>
				</view>

			</view>

			<view class="whitebox">
				<view class="shouyimingxi">收益明细</view>
				<view class="jilvtBox">
					<k-scroll-view ref="k-scroll-view" :refreshType="refreshType" :refreshTip="refreshTip" :loadTip="loadTip"
					 :loadingTip="loadingTip" :emptyTip="emptyTip" :touchHeight="touchHeight" :height="height" :bottom="bottom"
					 :autoPullUp="autoPullUp" @onPullDown="handlePullDown" @onPullUp="handleLoadMore">
						<!-- 数据列表 -->
						<view class="jilvt" v-for="(item,index) in listdata">
							<view class="one">
								<text class="jilvtText">{{item.state}}</text>
								<text class="jilvttime">{{item.add_time}}</text>
							</view>
							<view class="jilvtmoney">{{item.type == 1 ? '+' : '-'}}{{item.money}}<text style="margin-left: 2px;">分</text>
							</view>
						</view>
					</k-scroll-view>

				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import kScrollView from '@/components/k-scroll-view/k-scroll-view.vue';
	export default {
		components: {
			kScrollView
		},
		data() {
			return {
				list: '',
				listdata:[],
				refreshType: 'custom',
				refreshTip: '正在下拉',
				loadTip: '获取更多数据',
				loadingTip: '正在加载中...',
				emptyTip: '--我是有底线的--',
				limit:20,
				pages:1,
				touchHeight: 50,
				height: 0,
				bottom: 50,
				autoPullUp: true,
				stopPullDown: false, // 如果为 false 则不使用下拉刷新，只进行上拉加载
			}
		},
		computed: {

		},
		onLoad() {
			let _this = this
			let token = uni.getStorageSync("token")
			uni.request({
				url: this.G_base + '/api/myLzincome',
				method: "post",
				header: {
					'content-type': 'application/x-www-form-urlencoded',
					'Authori-zation': 'Bearer ' + token
				},
				success: (res) => {
					// console.log(res.data.data)
					this.list = res.data.data
					this.listdata = res.data.data.list
					console.log(this.list)
				},
				fail: (err) => {
					console.log(err)
				}
			});
		},
		methods: {
			goback() {
				uni.navigateBack({
					delta: 1
				})
			},
			totixian() {
				uni.navigateTo({
					url: "/pages/setting/Withdrawal"
				})
			},
			 handlePullDown(stopLoad) {
			           let _this = this
			           let token = uni.getStorageSync("token")
			           uni.request({
			           	url: this.G_base + '/api/myLzincome',
			           	method: "post",
			           	header: {
			           		'content-type': 'application/x-www-form-urlencoded',
			           		'Authori-zation': 'Bearer ' + token
			           	},
			           	success: (res) => {
			           		// console.log(res.data.data)
							if(res.data.data.list.length!=0){
								this.list = res.data.data
								this.listdata=res.data.data.list
							}
							this.pages=1
			           		console.log(this.list)
			           	},
			           	fail: (err) => {
			           		console.log(err)
			           	}
			           });
			            stopLoad ? stopLoad() : '';
			        },
			handleLoadMore(stopLoad) {
			           this.pages++
			           let token = uni.getStorageSync("token")
			           uni.request({
			           	url: this.G_base + '/api/myLzincome',
			           	method: "post",
			           	header: {
			           		'content-type': 'application/x-www-form-urlencoded',
			           		'Authori-zation': 'Bearer ' + token
			           	},
						data:{
							page:this.pages
						},
			           	success: (res) => {
			           		// console.log(res.data.data)
			           		if(res.data.data.list.length!=0){
			           			this.list = res.data.data
								this.listdata=this.listdata.concat(res.data.data.list)
			           		}
			           		console.log(this.list)
			           	},
			           	fail: (err) => {
			           		console.log(err)
			           	}
			           });
			        },
			        handleGoTop() {
			            this.$refs['k-scroll-view'].goTop();
			        }
		}
	}
</script>

<style>
	.toptitle {
		display: flex;
		align-items: center;
		margin-top: 60upx;
	}

	.xian {
		margin-left: 4%;
		margin-right: 4%;
	}

	.jilvt .one {
		display: flex;
		flex-direction: column;
	}

	.backcoloe {
		background-color: rgb(250, 250, 250);
	}

	.jilvt {
		vertical-align: top;
		margin: 10px;
		height: 100upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #f6f6f6;
	}

	.twotext {
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		margin-top: 20px;
	}

	.twotext text {
		margin-top: 5px;
		color: rgba(16, 16, 16, 1);
		font-size: 14px;
		text-align: left;
		font-family: PingFangSC-regular;
	}

	.shouyimingxi {
		padding-top: 10px;
		box-sizing: border-box;
		text-align: center;
		color: rgba(16, 16, 16, 1);
		font-size: 17px;
		width: 100%;
		text-align: center;
		font-family: PingFangSC-regular;
	}

	.whitebox {
		z-index: 2;
		margin-top: -30px;
		width: 100%;
		height: 100%;
		line-height: 20px;
		border-top-left-radius: 15px;
		border-top-right-radius: 15px;
		text-align: center;
		background-color: #FFFFFF;
	}

	.twowendang {
		margin-left: 20px;
		margin-right: 20px;
		margin-top: 30px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.twoone {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.twowendang .twoone:nth-child(1) {
		margin-left: 40px;
	}

	.twowendang .twoone:nth-child(2) {
		margin-right: 40px;
	}

	.twowendang {
		color: #FFFFFF;
	}

	.brkong {

		width: 30px;
		height: 1px;

		text-align: center;
		border: 1px solid rgba(85, 255, 255, 0.0);
	}

	.shouyimoney {
		margin-top: 40upx;
		flex-direction: column;
		display: flex;
		justify-content: center;
		align-items: center;

	}

	.shouyimoney text:nth-child(1) {
		margin-bottom: 10px;
	}

	.titleback {
		margin-top: 8px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		color: rgba(16, 16, 16, 1);
		font-size: 18px;
		font-family: PingFangSC-regular
	}

	.topback {
		width: 100%;
		height: 310px;
		line-height: 20px;
		background: -webkit-linear-gradient(left, #a00000, #e10004, #a00000);
		color: rgba(16, 16, 16, 1);
		font-size: 14px;
		text-align: center;
		font-family: Arial;
		border: 1px solid rgba(255, 255, 255, 0);
	}

	.jilvtBox {
		width: 90%;
		margin: 0 auto;
	}

	.jilvtText {
		color: rgba(16, 16, 16, 1);
		font-size: 16px;
		text-align: left;
		font-family: PingFangSC-regular;
	}

	.jilvttime {
		color: rgba(112, 110, 110, 1);
		font-size: 12px;
		text-align: left;
		font-family: PingFangSC-regular;
	}

	.jilvtmoney {
		color: rgba(16, 16, 16, 1);
		font-size: 17px;
		text-align: left;
		font-family: PingFangSC-regular;
	}
</style>
